<template>
	<div id="dialogue" v-loading="loading">
		<div class="dialogue-box">
			<template v-if="list!=''">
				<ul id="dialogue_list">
					<template v-for="(msg,index) in list" v-if="msg.status != -1">
						<li>
							<template v-if="msg.type != type_system">
								<!--<template v-if="msg.is_patient_sending == 1">
									<div class="dialogue-img-patient">
										<img :src=" msg.user_photo | default_img" class="dialogue-message-head" />
									</div>
								</template>
								<template v-else>
									<div class="dialogue-img-doctor">
										<img src="__PUBLIC__/images/image_default_doctor_portrait@3x.png" class="dialogue-message-head" />
									</div>
								</template>-->
								<img :src=" msg | default_img" :class="['dialogue-message-head',msg.direct]"/>
								<div :class="[msg.is_patient_sending == 1 ? 'patient-message': 'doctor-message',msg.direct]">
									<template v-if="msg.type == type_image">
										<div class="dialogue-photo">
											<img preview :src="msg.file_path"  :data-origin="msg.origin" />
											<!--<div v-bind:class="msg.arrow_box">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>-->
										</div>
									</template>
									<template v-else-if="msg.type == type_audio">
										<wt-audio :value="msg" @input="onAudioStatusChange" :ref="'audio' + index" class="clearfix">
											<template scope="props">
												<div :class="['audio-ctrl',msg.direct]">
													<div v-on:click="clickVoice(props.value,index)" :class="msg.dialogue_audio">
														<span v-show="props.status == 0 || props.status == 2" class="play"></span>
														<loading-wave v-show="props.status == 1" :size="0.5" color="#fefefe"></loading-wave>
														<span class="play-voice iconfont" v-bind:class="[props.value.is_patient_sending == 1 ? 'icon-yuyin1' : 'icon-yuyin', props.status==1 ? 'playing' : '' ]">
															<!--<audio :src="msg.file_path" type="audio/mp3" ref="audio"></audio>-->
														</span>
													</div>
												</div>
											</template>
										</wt-audio>

									</template>
									<template v-else>
										<div v-bind:class="[ msg.is_patient_sending == 1 ? 'dialogue-content-patient': 'dialogue-content-doctor' ]">
											<span v-bind:class="msg.arrow"></span>
											<template v-if="msg.type == type_text">
												<div>{{msg.conversion}} </div>
											</template>
										</div>
									</template>
									<div :class="msg.time">{{ msg.create_date | format_date}}</div>
								</div>
								<div v-if="msg.status === 0" class="send">(发送中)</div>
								<div v-else-if="msg.status === 2" class="reSend">
									<span v-on:click="resend(msg)" id="reSend">重新发送</span>
								</div>
								<div v-else-if="msg.status === 10" class="send">(发送失败)</div>

							</template>
							<!-- 系统消息模板 -->
							<template v-else>
								<div class="dialogue-message-system">
									<span>{{msg.conversion}}</span>
								</div>
							</template>
						</li>
					</template>
				</ul>
			</template>
			<template v-else>
				<div class="dialogue-tip">暂无关于该患者的会话信息!</div>
			</template>
		</div>
		<div v-bind:class="[ status.sending_enble == 1 ? 'input-box' : 'disable' ]" class="clearfix">
			<template v-if="status.sending_enble == 1">
				<div id="voice_show" class="message-select" :class="{'voice-mark': textInput}" v-on:click="toggleInput">
					<img src="<?= PUBLICPATH ?>images/button_instantmessage_record@3x.png" class="yuyin" v-show="textInput" />
					<img src="<?= PUBLICPATH ?>images/button_instantmessage_keyboard@3x.png" class="yuyin" v-show="!textInput" />
				</div>
				<div @touchstart="startRecord" @touchend="stopRecord" id="upload_voice" class="message-type" v-show="!textInput">
					<span>按住 说话</span>
				</div>
				<div @click="inputFocus" @focus="inputFocus" @input="onInput" @keyup.13="sendMsg" id="dialogue_text" contenteditable="true" class="message-type" v-show="textInput"></div>
				<div class="message-select">
					<img src="/images/button_instantmessage_add@3x.png" class="yuyin" id="upload_img" @click="uploadImg">
					<i @click="sendMsg" id="send_message">发送</i>
				</div>
			</template>
		</div>
		<template v-if="status.display_order_conversion_menu==1">
			<div class="colse" id="colse" v-on:click="close()">
				<div class="close_icon">
					<img src="/images/cancel.png" class="cancel_dialog">
				</div>
				<div class="turn_off">关闭</div>
			</div>
		</template>
		<div class="spinner-box" v-show="recording">
			<div class="spinner">
				<div class="rect1"></div>
				<div class="rect2"></div>
				<div class="rect3"></div>
				<div class="rect4"></div>
				<div class="rect5"></div>
			</div>
			<div class="spinner-text">录音中...</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import oss from '../utils/parseOSS'
	import audio from '../components/audio'
	import wave from '../components/loading/wave'
	import request from 'winged/utils/axios';
	export default {
		name: 'char',
		props:{
			//颠倒自己与其他人消息左右位置
			resverce:{
				type:Boolean,
				default:false
			}
		},
		components: {
			[[audio.name]]: audio,
			[[wave.name]]:wave,
		},
		data() {
			return {
				type_system: 0,
				type_text: 1,
				type_image: 2,
				type_audio: 3,
				status: { sending_enble: 0 }, // 禁用发送语音
				recording: false, // 录音动画屏蔽掉
				last_message: null, //上一条播放的语音
				last_event: null, //上一条播放的语音事件
				playing:null,//当前正在播放的audio
				list: [],
				loading:false
			}
		},
		created() {
			let path = "evaluation/consulting/get_consulting_conversions";
			let information = {
				user_id:this.$route.query.user_id,
				sc_id:this.$route.query.sc_id
			}
			this.loading = true
			request(path, "DRONE", information, true, (data)=>{
				if(typeof(data) == 'string'){
					data = JSON.parse(data)
				}
				if(data.status == 'SUCCESS'){
					this.list = data.consulting_conversion_list;
					this.class();
					this.loading = false
				}
			},(error)=>{
				this.$message.error('保存失败');
				this.loading = false
			})
			//oss解析图片和声音


		},
		methods: {
			class(){
				for(var i = 0; i < this.list.length; i++) {
					let file_path = this.list[i].file_path,
						user_photo = this.list[i].user_photo
					user_photo && (this.list[i].user_photo = oss.parse(user_photo, 'image', 'web-full', true))
					file_path && (this.list[i].file_path = oss.parse(file_path, 'voice', undefined, true))
					if(this.resverce){
						console.log("反转")
						if(Number(this.list[i].is_patient_sending) == 1){
							console.log("反转1")
							this.list[i].is_patient_sending = 2
						}else if(Number(this.list[i].is_patient_sending) == 2){
							console.log("反转2")
							this.list[i].is_patient_sending = 1
						}
					}
					switch(Number(this.list[i].is_patient_sending)){
						case 1:
							this.list[i].direct = 'left'
							this.list[i].arrow_box = 'left-arrow-box'
							this.list[i].time = 'dialogue-right-time'
							this.list[i].dialogue_audio = 'dialogue-left-audio'
							break
						case 0:case 2:
							this.list[i].direct = 'right'
							this.list[i].arrow_box = 'right-arrow-box'
							this.list[i].time = 'dialogue-left-time'
							this.list[i].dialogue_audio = 'dialogue-right-audio'
							break
						default:
							console.error("is_patient_sending must be 1 or 2")
					}
				}
			},
			onAudioStatusChange: function(e) {
				
			},
			//播放语音
			clickVoice: function(message, index) {
				if(this.$refs[`audio${index}`][0].status == 1){
					return
				}
				this.playing && this.playing.stop()
				this.$refs[`audio${index}`][0].play()
				this.playing = this.$refs[`audio${index}`][0]
			},
		},
		filters: {
			default_img: function(src) {
				if(src.is_patient_sending == 1){
					if(src.user_photo != undefined && src.user_photo !== '') {
						return src.user_photo;
					} else {
						return '/img/defaultHeader.png';
					}
				}else{
					return '/img/doctorDefaultHeader.png';
				}
			},
			format_date: function(time) {
				var format_date = time.substr(0, time.length - 2);
				return format_date;
			}
		},
	}
</script>

<style lang="less">
	
	@theme-color-light:hsla(23,100%,50%,1);
	@theme-color-dark:hsla(0,0%,92%,1);
	
	/*样式重置*/
	
	* {
		margin: 0;
		padding: 0
	}
	
	ul,
	li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.play{
		display:table;
		width:100%;
		height:100%;
		margin:0 auto;
		&:before{
			content: '';
			display:table-cell;
			background:url(../img/play.png) no-repeat center center;
			background-size:24px;
			cursor:pointer;
		}
	}
	
	.left-arrow-box {
		width: 6px;
		height: 150px;
		position: absolute;
		top: 0;
		left: 0;
		&:after{
			content:'';
			display:block;
			position:absolute;
			top:12px;
			left:-12px;
			width: 0;
			height: 0px;
			border-width: 6px;
			border-style:solid;
			border-color: transparent @theme-color-light transparent transparent;
			
		}
	}
	
	.right{
		float:right;
	}
	.left{
		float:left;
	}
	
	.right-arrow-box {
		width: 6px;
		height: 150px;
		position: absolute;
		top: 0;
		right: 0;
		&:after{
			content:'';
			display:block;
			position:absolute;
			top:12px;
			right:-12px;
			width: 0;
			height: 0px;
			border-width: 6px;
			border-style:solid;
			border-color: transparent transparent transparent @theme-color-light;
			
		}
	}
	
	.dialogue-content{
		position: relative;
		word-wrap: break-word;
		max-width: 30rem;
		padding: 10px;
		background: @theme-color-light;
		color: #FFF;
		border-radius: 5px;
		margin: 15px auto 0;
		margin-left: 10px;
		display: inline-block;
	}
	.dialogue-content-patient {
		.dialogue-content;
		background: @theme-color-light;
		color: #FFF;
		margin-left: 10px;
		display: inline-block;
	}
	.dialogue-content-doctor {
		.dialogue-content;
		background: @theme-color-dark;
		right: 10px;
		color: #666;
		display: inline-block;
		*display: inline;
		*zoom: 1;
	}
	.dialogue-time{
		font-size: 12px;
		color: #999;
		margin: 5px 10px;
	}
	.dialogue-left-time {
		.dialogue-time;
		text-align: right;
	}
	.dialogue-right-time {
		.dialogue-time;
		text-align: left;
	}
	.dialogue-audio {
		position: relative;
		margin: 15px auto 0;
		border-radius: 5px;
		width: 60px;
		height: 40px;
		text-align: center;
		color: #FFF;
	}
	.dialogue-left-audio {
		.dialogue-audio;
		background-color: @theme-color-light;
		margin-left: 10px;
	}
	.dialogue-right-audio {
		.dialogue-audio;
		background-color: @theme-color-light;
		margin-right: 10px;
	}
	
	.clearfix{
		zoom:1;
		&:before{
			content:'';
			display:block;
			visibility: hidden;
			line-height:0;
			height:0;
			clear:both;
		}
	}
	
	body {
		background-color: #F2F2F2;
	}
	
	#dialogue {
		font-family: SimHei;
		width: 100%;
		position: relative;
		padding-bottom:20px;
	}
	
	.disable {
		pointer-events: none;
	}
	
	.dialogue-box {
		width:100%;
		max-width: 800px;
		background: #fff;
		padding-top: 20px;
		transition: all 0.5s;
		margin:0 auto;
		top: 20px;
		border-radius: 10px;
		bottom: 20px;
		position: relative;
		padding-bottom: 20px;
		li{
			width: 100%;
			position: relative;
			margin-top: 10px;
			padding: 0 10px;
			overflow: hidden;
		}
	}
	
	.dialogue-tip {
		text-align: center;
	}

	.dialogue-message-head {
		margin-top: 15px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-size:100% 110%;
	}
	/*患者对话*/

	.dialogue-photo {
		position: relative;
		margin: 15px 10px;
		width: 120px;
		height: 150px;
		img{
			width: 120px;
			height: 150px;
			border-radius: 5px;
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
		}
	}
	
	/*语音发送 患者*/
	
	
	
	
	
	
</style>